// 标点
export const addmarker = (map, item) => {
	const point = new window.BMap.Point(item.lng, item.lat);
	// let myIcon = new window.BMap.Icon("./static/green.png", new window.BMap.Size(23, 25), {
	// 指定定位位置。
	// 当标注显示在地图上时，其所指向的地理位置距离图标左上
	// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
	// 图标中央下端的尖角位置。
	// anchor: new window.BMap.Size(45, 65),
	// 设置图片偏移。
	// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
	// 需要指定大图的偏移位置，此做法与css sprites技术类似。
	// });
	// 创建标注对象并添加到地图
	// let marker = new window.BMap.Marker(point, {icon: myIcon});
	const plex = new ComplexCustomOverlay(point, map, item);
	return plex;
};

function ComplexCustomOverlay(point, map, item) {
	this._point = point;
	this._map = map;
	this._item = item;
}

//以下都是在ComplexCustomOverlay这个原型下添加属性和方法的，
// 覆盖物
ComplexCustomOverlay.prototype = new window.BMap.Overlay();

// 初始化
ComplexCustomOverlay.prototype.initialize = function(map) {
	this._map = map;
	// 创建一个div
	const div = (this._div = document.createElement('div'));
	//父级div样式
	div.style.width = '30px';
	div.style.height = '40px';
	div.style.marginLeft = '5px';
	div.style.marginTop = '24px';
	div.style.position = 'absolute';
	// 有marker的话 添加覆盖点
	// if (this._marker) {
	//   map.addOverlay(this._marker);
	// } else {
	const arrow = (this._arrow = document.createElement('img'));

	arrow.src = [
		'./static/school_icon.png',
		'./static/Commercial_icon.png',
		'./static/hospital_icon.png',
		'./static/school_icon.png',

	][this._item.type];
	arrow.style.position = 'relative';
	arrow.style.overflow = 'hidden';
	// 让arrow这个div成为div这个div的子元素
	div.appendChild(arrow);
	arrow.className = 'css_animation';
	if (this._item.title || this._item.congestIndex !== undefined) {
		const infoContainer = (this._infoContainer = document.createElement('div'));
		infoContainer.style.display = 'inline-flex'; // 设置为横向布局
		infoContainer.style.alignItems = 'center'; // 垂直居中
		infoContainer.style.gap = '5px'; // 间距
		infoContainer.style.background = '#fff'; // 背景白色
		infoContainer.style.borderRadius = '1px';
		infoContainer.style.paddingRight = '5px';
		infoContainer.style.position = 'absolute';
		infoContainer.style.top = '-20px'; // 图标上方
		infoContainer.style.left = '35px';

		// 拥堵指数
		if (this._item.congestIndex !== undefined) {
			const congestIndex = (this._congestIndex = document.createElement('div'));
			congestIndex.textContent = `${this._item.congestIndex}`;
			congestIndex.style.color = '#fff';
			congestIndex.style.fontSize = '12px';
			congestIndex.style.padding = '2px 5px';
			congestIndex.style.borderRadius = '1px';
			congestIndex.style.background = this.getBackgroundColor(this._item.congestIndex);
			infoContainer.appendChild(congestIndex);
		}

		// 标题
		if (this._item.title) {
			const title = (this._title = document.createElement('div'));
			title.textContent = `${this._item.title}`;
			title.style.color = '#000';
			title.style.fontSize = '12px';
			title.style.whiteSpace = 'nowrap'; // 强制一行显示
			title.style.textOverflow = 'ellipsis';
			title.style.overflow = 'hidden';
			infoContainer.appendChild(title);
		}

		div.appendChild(infoContainer);
	}

	// }
	// 在窗格中加入div这个dom元素
	map.getPanes().labelPane.appendChild(div);
	return div;
};

ComplexCustomOverlay.prototype.draw = function() {
	const map = this._map;
	const pixel = map.pointToOverlayPixel(this._point);
	this._div.style.left = `${pixel.x - 25}px`;
	this._div.style.top = `${pixel.y - 60}px`;
};
// 获取拥堵指数的背景色
ComplexCustomOverlay.prototype.getBackgroundColor = function(congestIndex) {
	// 根据拥堵指数设置不同颜色
	if (congestIndex < 1.5) {
		return '#4CAF50'; // 绿色
	} else if (congestIndex < 2) {
		return '#FFC107'; // 黄色
	} else if (congestIndex < 4) {
		return '#E54C45'; // 红色
	} else {
		return '#AA2017'; // 深红色
	}
};

ComplexCustomOverlay.prototype.setPosition = function(point) {
	this._point = point;
	this.draw();
	// if (this._marker)
	//     this._marker.setPosition(this._point);
};

ComplexCustomOverlay.prototype.getPosition = function() {
	return this._item;
};
//添加监听事件
ComplexCustomOverlay.prototype.addEventListener = function(event, fun) {
	this._div[`on${event}`] = fun;
};
export const maketList = [{
		lng: 118.280418,
		lat: 35.131198,
		type: 1,
	},
	{
		lng: 118.272081,
		lat: 35.12925,
		type: 2,
	},
	{
		lng: 118.287604,
		lat: 35.118031,
		type: 1,
	},
	{
		lng: 118.298959,
		lat: 35.128718,
		type: 0,
	},
	{
		lng: 118.303127,
		lat: 35.111358,
		type: 2,
	},
	{
		lng: 118.313547,
		lat: 35.131788,
		type: 1,
	},
	{
		lng: 118.298168,
		lat: 35.14088,
		type: 1,
	},
	{
		lng: 118.296372,
		lat: 35.141411,
		type: 1,
	},
	{
		lng: 118.288898,
		lat: 35.136216,
		type: 1,
	},
	{
		lng: 118.329717,
		lat: 35.126061,
		type: 1,
	},
	{
		lng: 118.332519,
		lat: 35.11307,
		type: 1,
	},
	{
		lng: 118.301402,
		lat: 35.101259,
		type: 0,
	},
	{
		lng: 118.323357,
		lat: 35.150724,
		type: 2,
	},
];